<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width"/>
    <title></title>
    <link rel="stylesheet" href="css/animate.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <!--<link rel="stylesheet" href="css/index2.css"/>-->
    <link rel="stylesheet" href="css/test.css"/>


</head>
<!---->
<!--<style>-->
<!--.first_book{-->
<!--width: 50vw;-->
<!--height: 60vw;-->
<!--background: url("images/rank/big_%20polygon.png");-->
<!--background-repeat:round ;-->
<!--margin: auto;-->
<!--}-->
<!--.first_book img{-->
<!--width: 60%;-->
<!--margin: auto;-->
<!--display: block;-->
<!--padding-top: 12%;-->
<!--}-->
<!--.first_book p{-->
<!--font-size: 5vw;-->
<!--float: left;-->
<!--margin-left: 37%;-->
<!--margin-top: 5px;-->
<!--}-->
<!--.first_book span{-->
<!--font-size: 3vw;-->
<!--/*font-size: 1rem;*/-->
<!--float: left;-->
<!--display: block;-->
<!--width:5vw;-->
<!--height:5vw;-->
<!--border:1px solid #FC3737;-->
<!--border-radius: 100%;-->
<!--background: #A32B32;-->
<!--display: block;-->
<!--text-align: center;-->
<!--line-height: 5vw;-->
<!--margin-top: 5px;-->
<!--}-->
<!--</style>-->
<body>


<div class="wrap">
    <div class="swiper-container swiper-container-v">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="page_01 zero">
                    <div class="top">
                        <span class="back"></span>

                        <h3>首页</h3>
                    </div>

                    <div class="page_01_01" style="-webkit-animation:op 4s linear 0s infinite;"><img src="images/1/dianzhui.png" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"></div>
                    <div class="page_01_03"><img src="images/1/bt.png" class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s"></div>
                    <div class="page_01_06 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"></div>
                    <div class="page_01_07 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s"></div>
                    <div class="page_01_08 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.7s"></div>
                    <div class="page_01_04" style="-webkit-animation:qw 8s linear 0s infinite;"><img src="images/1/quan_wai.png" class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s"></div>
                    <div class="page_01_05" style="-webkit-animation:qn 10s linear 0s infinite;"><img src="images/1/quan_nei.png" class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"></div>
                    <div class="page_01_09 open ani" style="top:69.5%;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">开启旅程</div>
                    <div class="page_01_10 ani" swiper-animate-effect="rotateInDownRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"><img src="images/1/xian.png"></div>
                    <div class="page_01_11 ani" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"><img src="images/1/xian.png"></div>
                    <div class="go"><img src="images/go.png" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1s"></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="page_01 one">
                    <div class="top">
                        <span class="back"></span>

                        <h3>借阅排行</h3>
                    </div>
                    <div class="first_book ani rotateIn animated" swiper-animate-effect="rotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:0.2s;-webkit-animation-delay:0.2s;">
                        <img src="images/rank/big_book.png" alt=""/>
                        <div>
                            <p>TOP.</p>
                            <span>1</span>
                        </div>
                    </div>
                    <div class="bot_book">
                        <div class="text">
                            <p class="ptxt ani bounceOutDown animated" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="2.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:2.5s;-webkit-animation-delay:2.5s;">梦里花落知多少</p>
                            <p class="ptxt ani bounceOutDown animated" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="3s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:3s;-webkit-animation-delay:3s;">作者：郭敬明</p>
                            <p class="ptxt ani bounceOutDown animated" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="3.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:3.5s;-webkit-animation-delay:3.5s;">借阅量：3478</p>
                        </div>
                        <div class="first_book small2 ani bounceIn animated" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:1.5s;-webkit-animation-delay:1.5s;">
                            <img src="images/rank/big_book.png" alt=""/>
                            <div>
                                <p>TOP.</p>
                                <span>2</span>
                            </div>
                        </div>
                        <div class="first_book small3 ani bounceInRight animated" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:0.5s;-webkit-animation-delay:0.5s;">
                            <img src="images/rank/big_book.png" alt=""/>
                            <div>
                                <p>TOP.</p>
                                <span>3</span>
                            </div>
                        </div>
                        <div class="first_book small4 ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:0.5s;-webkit-animation-delay:0.5s;">
                            <img src="images/rank/big_book.png" alt=""/>
                            <div>
                                <p>TOP.</p>
                                <span>4</span>
                            </div>
                        </div>
                        <div class="first_book small5 ani bounceInRight animated" swiper-animate-effect="bounceInRight" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:0.5s;-webkit-animation-delay:0.5s;">
                            <img src="images/rank/big_book.png" alt=""/>
                            <div>
                                <p>TOP.</p>
                                <span>5</span>
                            </div>
                        </div>
                        <div class="first_book small6 ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:0.5s;-webkit-animation-delay:0.5s;">
                            <img src="images/rank/big_book.png" alt=""/>
                            <div>
                                <p>TOP.</p>
                                <span>6</span>
                            </div>
                        </div>
                        <div class="first_book small7 ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:0.5s;-webkit-animation-delay:0.5s;">
                            <img src="images/rank/big_book.png" alt=""/>
                            <div>
                                <p>TOP.</p>
                                <span>7</span>
                            </div>
                        </div>
                        <div class="first_book small8 ani bounceInRight animated" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:0.5s;-webkit-animation-delay:0.5s;">
                            <img src="images/rank/big_book.png" alt=""/>
                            <div>
                                <p>TOP.</p>
                                <span>8</span>
                            </div>
                        </div>
                        <div class="first_book small9 ani bounceInRight animated" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:0.5s;-webkit-animation-delay:0.5s;">
                            <img src="images/rank/big_book.png" alt=""/>
                            <div>
                                <p>TOP.</p>
                                <span>9</span>
                            </div>
                        </div>
                        <div class="first_book small10 ani bounceInRight animated" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:0.5s;-webkit-animation-delay:0.5s;">
                            <img src="images/rank/big_book.png" alt=""/>
                            <div>
                                <p>TOP.</p>
                                <span>10</span>
                            </div>
                        </div>

                    </div>

                    <div class="go"><img src="images/go.png" class="ani" swiper-animate-effect="fadeInDown"
                                         swiper-animate-duration="0.5s" swiper-animate-delay="1s"></div>
                </div>
                <p></p>
            </div>
            <div class="swiper-slide">
                <div class="page_01 two">
                    <div class="top">
                        <span class="back"></span>
                        <h3>借还书系统</h3>
                    </div>
                    <div class="borders ani" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.3s" swiper-animate-delay="0s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.3s;-webkit-animation-duration:0.3s;animation-delay:0s;-webkit-animation-delay:0s;">
                        <div class="innerborder">累计借阅3435455册</div>
                    </div>
                    <div class="bbox">
                        <ul class="borrow clearfix">
                            <li class="ani" swiper-animate-effect="rotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:1s;-webkit-animation-delay:1s;">

                                <div class="todayb">今日借阅</div>
                                <span>170</span>
                                <span>册</span>
                                <img src="images/borrow/ltop.png" alt="" class="ltop"/>
                                <img src="images/borrow/lbottom.png" alt="" class="lbottom"/>
                                <img src="images/borrow/rtop.png" alt="" class="rtop"/>
                                <img src="images/borrow/rbottom.png" alt="" class="rbottom"/>
                            </li>
                            <li class="ani" swiper-animate-effect="rotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:1.5s;-webkit-animation-delay:1.5s;">
                                <div class="todayb">本周借阅</div>
                                <span>340</span>
                                <span>册</span>
                                <img src="images/borrow/ltop.png" alt="" class="ltop"/>
                                <img src="images/borrow/lbottom.png" alt="" class="lbottom"/>
                                <img src="images/borrow/rtop.png" alt="" class="rtop"/>
                                <img src="images/borrow/rbottom.png" alt="" class="rbottom"/>
                            </li>
                        </ul>
                    </div>
                    <div id="container4" style="min-width:300px;height:30%"></div>

                </div>
            </div>
            <div class="swiper-slide">
                <div class="page_01 three">
                    <div class="top">
                        <span class="back"></span>

                        <h3>到馆统计</h3>
                    </div>
                    <div class="outer ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                         swiper-animate-delay="0.2s">
                        <div class="inner"></div>
                        <img src="images/count/two_pic.png" alt=""/>
                    </div>
                    <div class="pernum ani clearfix" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.9s">
                        <div class="numone">
                            <div class="count1">345人</div>
                            <div class="bar1"></div>
                        </div>

                        <div class="numtwo">
                            <div class="count2">56人</div>
                            <div class="bar2"></div>

                        </div>

                        <div class="numthree">
                            <div class="count3">12345人</div>
                            <div class="bar3"></div>
                        </div>

                    </div>
                    <div class="des ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">
                        <div class="title1">今日到管</div>
                        <div class="title2">当前到管</div>
                        <div class="title3">本周到管</div>
                    </div>
                    <div class="totalPer ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.4s">
                        <p>累计到馆（从2016年1月开始）</p>
                        <div class="box">
                            <div class="rectangle_bg">
                                <div class="rectangle">0人次</div>
                            </div>

                        </div>
                    </div>
                    <div class="go"><img src="images/go.png" class="ani" swiper-animate-effect="fadeInDown"
                                         swiper-animate-duration="0.5s" swiper-animate-delay="1.6s"></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="page_01 four">
                    <div class="top">
                        <span class="back"></span>
                        <h3>今日推荐</h3>
                    </div>
                    <div class="swiper-container swiper-container-h">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="banner_bg1">
                                    <img src="images/recommend/bg_pic.png" alt="" class="bg_pic"/>
                                    <p>菩提花开又花落</p>

                                </div>
                                <div class="banner_des">
                                    <span>当前已有</span>
                                    <span class="num_bg">34人</span>
                                    <span>参与阅读</span>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="banner_bg1">
                                    <img src="images/recommend/bg_pic.png" alt="" class="bg_pic"/>
                                    <p>菩提花开又花落</p>

                                </div>
                                <div class="banner_des">
                                    <span>当前已有</span>
                                    <span class="num_bg">34人</span>
                                    <span>参与阅读</span>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="banner_bg1">
                                    <img src="images/recommend/bg_pic.png" alt="" class="bg_pic"/>
                                    <p>菩提花开又花落</p>

                                </div>
                                <div class="banner_des">
                                    <span>当前已有</span>
                                    <span class="num_bg">34人</span>
                                    <span>参与阅读</span>
                                </div>
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <!--<div class="swiper-pagination"></div>-->
                    </div>
                    <div class="go"><img src="images/go.png" class="ani" swiper-animate-effect="fadeInDown"
                                         swiper-animate-duration="0.5s" swiper-animate-delay="1.6s"></div>

                </div>
            </div>
            <div class="swiper-slide">
                <div class="page_01 five">
                    <div class="top">
                        <span class="back"></span>
                        <h3>通知</h3>
                    </div>
                    <div class="notice_title">少儿阅读中心5月份预告</div>
                    <div class="swiper-container swiper-container-scrollbar notice_con" id="wrapper">
                        <div class="swiper-wrapper">
                            <ul class="swiper-slide">
                                <li>
                                    <span class="notice_date">5月7日</span>
                                    <span class="contact_icon"></span>
                                    <span class="contact_line">10:00am</span>
                                    <div class="notice_con">
                                        <span class="new_icon"></span>
                                        <h3>喜洋洋与灰太狼</h3>
                                        <p>将带给是一哈哈集合集合就会房款开发开发离开股份工具栏</p>
                                    </div>
                                </li>
                                <li>
                                    <span class="notice_date">5月7日</span>
                                    <span class="contact_icon"></span>
                                    <span class="contact_line">10:00am</span>
                                    <div class="notice_con">
                                        <h3>喜洋洋与灰太狼</h3>
                                        <p>将带给是一哈哈集合集合就会房款开发开发离开股份工具栏</p>
                                    </div>
                                </li>
                                <li>
                                    <span class="notice_date">5月7日</span>
                                    <span class="contact_icon"></span>
                                    <span class="contact_line">10:00am</span>
                                    <div class="notice_con">
                                        <h3>喜洋洋与灰太狼</h3>
                                        <p>将带给是一哈哈集合集合就会房款开发开发离开股份工具栏</p>
                                    </div>
                                </li>
                                <li>
                                    <span class="notice_date">5月7日</span>
                                    <span class="contact_icon"></span>
                                    <span class="contact_line">10:00am</span>
                                    <div class="notice_con">
                                        <span class="new_icon"></span>
                                        <h3>喜洋洋与灰太狼</h3>
                                        <p>将带给是一哈哈集合集合就会房款开发开发离开股份工具栏</p>
                                    </div>
                                </li>
                                <li>
                                    <span class="notice_date">5月7日</span>
                                    <span class="contact_icon"></span>
                                    <span class="contact_line">10:00am</span>
                                    <div class="notice_con">
                                        <h3>喜洋洋与灰太狼</h3>
                                        <p>将带给是一哈哈集合集合就会房款开发开发离开股份工具栏</p>
                                    </div>
                                </li>
                                <li>
                                    <span class="notice_date">5月7日</span>
                                    <span class="contact_icon"></span>
                                    <span class="contact_line">10:00am</span>
                                    <div class="notice_con">
                                        <h3>喜洋洋与灰太狼</h3>
                                        <p>将带给是一哈哈集合集合就会房款开发开发离开股份工具栏</p>
                                    </div>
                                </li>


                            </ul>

                        </div>
                    </div>






                    <div class="go"><img src="images/go.png" class="ani" swiper-animate-effect="fadeInDown"
                                         swiper-animate-duration="0.5s" swiper-animate-delay="1.6s"></div>

                </div>
            </div>

        </div>
    </div>
</div>
</body>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/grid.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/index.js"></script>

<!--<script src="js/test.js"></script>-->

</html>
<div class="page_06_02 ani                                bounceOutDown animated" swiper-animate-effect="bounceOutDown" swiper-animate-duration="0.5s" swiper-animate-delay="4.6s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:4.6s;-webkit-animation-delay:4.6s;"><img src="images/6/txt_01.png" class="ani                                fadeInUp animated" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:0.2s;-webkit-animation-delay:0.2s;"></div>